<template>
  <el-dialog
    title="客户常用派送地址信息库"
    :visible.sync="showDialog"
    @close="closeDialog"
  >
    <div id="dialogMain" class="dialog-main">
      <el-card
        v-for="(item, index) in addressList"
        :key="index"
        class="card-main "
        :class="{ selectCart: item.selectType }"
      >
        <el-form
          :ref="`importerForm${index}`"
          :model="item"
          label-position="left"
          label-width="98px"
          size="mini"
          @click.native="selectCard(index)"
          @dblclick.native="selectedCard(index)"
        >
          <el-row>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">公司名/个人:</div>
                <span>{{ item.customerDeliveryCompany }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">联系人:</div>
                <span>{{ item.customerDeliveryAddressAttn }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">联系电话:</div>
                <span>{{ item.customerDeliveryAddressPhone }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">州/省:</div>
                <span>{{ item.state }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">城市:</div>
                <span>{{ item.city }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item>
                <div slot="label">邮编:</div>
                <span>{{ item.zipCode }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <div slot="label">详细地址1:</div>
            <span>{{ item.address }}</span>
          </el-form-item>
          <el-form-item>
            <div slot="label">详细地址2:</div>
            <span>{{ item.address2 }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="selectFn">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { customerdeliveryaddressList } from '@/api/myProfile'
import { getToken } from '@/utils/auth'
export default {
  props: {
    selectDispatch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      timer: null,
      addressList: []
    }
  },
  computed: {
    showDialog: {
      get: function() {
        return this.selectDispatch
      },
      set: function(val) {
        this.$emit(`update:selectDispatch`, val)
      }
    }
  },
  watch: {
    selectDispatch: {
      handler(val, oldVal) {
        console.log('val :>> ', val)
        if (val) {
          this.init()
        }
      }
    }
  },

  methods: {
    async init() {
      this.$store.dispatch('app/toggleDialog', true)

      const data = await customerdeliveryaddressList({
        authorization: getToken()
      })

      this.addressList = data
      this.$store.dispatch('app/toggleDialog', false)
    },

    closeDialog() {
      this.$emit(`update:selectDispatch`, false)
    },

    selectCard(index) {
      const time = this.timer
      clearTimeout(time) // 首先清除计时器
      this.timer = setTimeout(() => {
        console.log('单击', index)
        for (const i in this.addressList) {
          if (parseInt(i) === index) {
            const flag = this.addressList[index].selectType
            this.$set(this.addressList[index], 'selectType', !flag)
          } else {
            this.addressList[i].selectType = false
          }
        }
      }, 300) // 大概时间300ms
    },
    selectedCard(index) {
      console.log('双击', index)
      const time = this.timer
      clearTimeout(time)
      this.sortData(this.addressList[index])
    },
    selectFn() {
      if (this.addressList.length > 0) {
        for (const i of this.addressList) {
          if (!i.selectType) {
            this.$message({
              message: '请选择一个派送地址',
              type: 'warning'
            })
            return false
          } else {
            this.sortData(i)
            break
          }
        }
      }
    },
    sortData(data) {
      const d = {
        dispatcher: data.customerDeliveryCompany,
        dispatchLinkMan: data.customerDeliveryAddressAttn,
        dispatchPhone: data.customerDeliveryAddressPhone,
        dispatchProvince: data.state,
        dispatchZipCode: data.zipCode,
        dispatchCity: data.city,
        dispatchAddress: data.address
      }
      this.$emit(`update:selectDispatch`, false)
      this.$emit(`dialogCb`, d)
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-main {
  background: #f5f9fc;
  padding: 12px 16px;
  max-height: 500px;
  overflow-y: auto;
  .card-main {
    padding: 20px 20px 0;
    position: relative;
    &:not(:last-child) {
      margin-bottom: 20px;
    }
  }
  .selectCart {
    box-shadow: 0 2px 12px 0 rgba(67, 201, 162, 1);
  }
}
</style>
